<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('修改会员类型')}" />
    <style>
        #showImage{
            width: 200px;
            height: 117px;
        }
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
        <form class="form-horizontal m" id="form-type-edit" th:object="${memberType}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group row" style="margin-top: 30px">
                <label class="col-sm-2 col-form-label text-sm-right">会员名称</label>
                <div class="col-sm-8">
                    <input id="title" name="title" th:field="*{title}" class="form-control" placeholder="请输入会员名称"  type="text">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">会员图片</label>
                <div class="col-sm-6">
                    <input id="imageUrl" name="imageUrl" th:field="*{imageUrl}" placeholder="(请上传宽高为： 500*332 的图片)" class="form-control" type="text">
                </div>
                <div class="col-sm-2">
                    <label for="uploadImg" class="btn btn-danger"><i class="fa fa-image"></i>上传</label>
                    <input type="file" onchange="ImgLogo()" style="display: none" value="" name="uploadImg" id="uploadImg" accept="image/*"/>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">图片预览</label>
                <div class="col-sm-8">
                    <img id="showImage" th:src="*{imageUrl}"/>
                </div>
            </div>
        </form>
    </div>
    <th:block th:insert="~{include :: footer}" />
    <script type="text/javascript">

        function submitHandler() {
            if ($('#title').val().length < 1) {
                return layer.msg('会员名称不能为空！');
            }
            $.operate.save("/member/type/save.json", $('#form-type-edit').serialize());
        }

        function ImgLogo() {
            var file = $('#uploadImg')[0].files[0];
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "/upload/image.json",
                data: formData,
                type: "post",
                processData: false,
                contentType: false,
                dataType: "json",
                mimeType: "multipart/form-data",
                success: function (result) {
                    if (result.code === 0) {
                        $("#imageUrl").val(result.data.src);
                        $("#showImage").attr("src", result.data.src);
                    } else {
                        layer.msg('上传失败', {icon: 2});
                    }
                }
            })
        }
    </script>
</body>
</html>